<template>
	<view class="steps">
		<view
			class="arrow"
			:style="{
				left: percent + '%'
			}"
		>
			<u-icon name="arrow-down-fill" color="#d1d1d1"></u-icon>
		</view>
		<view class="flex align-center">
			<view
				class="step"
				v-for="(item, index) in steps"
				:style="{
					background: item.color
				}"
			></view>
		</view>
		<view class="flex align-center" v-if="size == 'lg'">
			<view
				class="step_text"
				v-for="(item, index) in steps"
				:style="{
					color: item.color
				}"
			>
				{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'O2Step',
	props: {
		size: {
			type: String,
			default: 'default'
		},
		//血氧
		spo2: {
			type: Number,
			default: 95
		}
	},
	computed: {
		//计算血氧等级 最高100，95，90
		percent() {
			let percent = 0,
				num = 0;
			if (this.spo2 >= 95) {
				percent = (this.spo2 - 95) / 5;
				num = 4;
			} else if (this.spo2 >= 90) {
				percent = (this.spo2 - 90) / 5;
				num = 1;
			} else {
				percent = 0.5;
				num = 0;
			}
			percent = (1 / 6) * (num + (percent > 1 ? 1 : percent));
			return percent * 100;
		}
	},
	data() {
		return {
			steps: [
				{
					color: '#FC726E',
					text: '危险'
				},
				{
					color: '#FFA95A',
					text: '偏低'
				},
				{
					color: '#68D89E',
					text: '正常'
				}
			]
		};
	}
};
</script>

<style scoped lang="scss">
.steps {
	position: relative;
	width: 100%;
	.arrow {
		position: absolute;
		top: -30upx;
		left: 0;
		transform: translateX(-50%);
	}
	.step {
		flex: 1;
		height: 10upx;
		border-radius: 50upx;
		&:nth-child(2) {
			flex: 3;
		}
		&:nth-child(3) {
			flex: 2;
		}
	}
	.step_text {
		flex: 1;
		text-align: center;
		font-size: 20upx;
		margin-top: 10upx;
		&:nth-child(2) {
			flex: 3;
		}
		&:nth-child(3) {
			flex: 2;
		}
	}
}
</style>
